<template>
  <UseDark v-slot="{ isDark, switchMode }">
    <div class="auth">
      <div
        :class="[
          'wrapper',
          {
            center: center
          }
        ]"
      >
        <slot
          :isDark="isDark"
          :switchMode="switchMode"
          :useView="useView"
          :toggleView="ViewToggles"
        ></slot>
      </div>
    </div>
  </UseDark>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import UseDark from '@/apps/dark/UseDark.vue'
import type { AuthViewType } from './types'

const useView = ref<AuthViewType>('scan')

/**切换视图 */
class ViewToggles {
  static pswdScan() {
    if (useView.value === 'password') {
      useView.value = 'scan'
    } else {
      useView.value = 'password'
    }
  }

  static pswdRegist() {
    if (useView.value === 'register') {
      useView.value = 'password'
    } else {
      useView.value = 'register'
    }
  }

  static scanRegist() {
    if (useView.value === 'register') {
      useView.value = 'scan'
    } else {
      useView.value = 'register'
    }
  }

  static toggleAll() {
    if (useView.value === 'register') {
      useView.value = 'scan'
    } else if (useView.value === 'scan') {
      useView.value = 'password'
    } else if (useView.value === 'password') {
      useView.value = 'register'
    }
  }
}

defineProps({
  center: {
    type: Boolean,
    default: false
  }
})
</script>

<style lang="scss">
.auth {
  user-select: none;
  padding: 9px;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;

  .wrapper {
    height: 0;
    flex: 1;
  }
  .center {
    display: grid;
    place-content: center;
  }
}
</style>
